<!-- HTML header for doxygen 1.8.6-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.8.13"/>
<title>OpenCV: Trackbar as the Color Palette</title>
<link href="../../opencv.ico" rel="shortcut icon" type="image/x-icon" />
<link href="../../tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../../jquery.js"></script>
<script type="text/javascript" src="../../dynsections.js"></script>
<script type="text/javascript" src="../../tutorial-utils.js"></script>
<link href="../../search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../../search/searchdata.js"></script>
<script type="text/javascript" src="../../search/search.js"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
    jax: ["input/TeX","output/HTML-CSS"],
});
//<![CDATA[
MathJax.Hub.Config(
{
  TeX: {
      Macros: {
          matTT: [ "\\[ \\left|\\begin{array}{ccc} #1 & #2 & #3\\\\ #4 & #5 & #6\\\\ #7 & #8 & #9 \\end{array}\\right| \\]", 9],
          fork: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ \\end{array} \\right.", 4],
          forkthree: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ #5 & \\mbox{#6}\\\\ \\end{array} \\right.", 6],
          forkfour: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ #5 & \\mbox{#6}\\\\ #7 & \\mbox{#8}\\\\ \\end{array} \\right.", 8],
          vecthree: ["\\begin{bmatrix} #1\\\\ #2\\\\ #3 \\end{bmatrix}", 3],
          vecthreethree: ["\\begin{bmatrix} #1 & #2 & #3\\\\ #4 & #5 & #6\\\\ #7 & #8 & #9 \\end{bmatrix}", 9],
          cameramatrix: ["#1 = \\begin{bmatrix} f_x & 0 & c_x\\\\ 0 & f_y & c_y\\\\ 0 & 0 & 1 \\end{bmatrix}", 1],
          distcoeffs: ["(k_1, k_2, p_1, p_2[, k_3[, k_4, k_5, k_6 [, s_1, s_2, s_3, s_4[, \\tau_x, \\tau_y]]]]) \\text{ of 4, 5, 8, 12 or 14 elements}"],
          distcoeffsfisheye: ["(k_1, k_2, k_3, k_4)"],
          hdotsfor: ["\\dots", 1],
          mathbbm: ["\\mathbb{#1}", 1],
          bordermatrix: ["\\matrix{#1}", 1]
      }
  }
}
);
//]]>
</script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"></script>
<link href="../../doxygen.css" rel="stylesheet" type="text/css" />
<link href="../../stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<!--#include virtual="/google-search.html"-->
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr style="height: 56px;">
  <td id="projectlogo"><img alt="Logo" src="../../opencv-logo-small.png"/></td>
  <td style="padding-left: 0.5em;">
   <div id="projectname">OpenCV
   &#160;<span id="projectnumber">4.5.2</span>
   </div>
   <div id="projectbrief">Open Source Computer Vision</div>
  </td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.8.13 -->
<script type="text/javascript">
var searchBox = new SearchBox("searchBox", "../../search",false,'Search');
</script>
<script type="text/javascript" src="../../menudata.js"></script>
<script type="text/javascript" src="../../menu.js"></script>
<script type="text/javascript">
$(function() {
  initMenu('../../',true,false,'search.php','Search');
  $(document).ready(function() { init_search(); });
});
</script>
<div id="main-nav"></div>
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
     onmouseover="return searchBox.OnSearchSelectShow()"
     onmouseout="return searchBox.OnSearchSelectHide()"
     onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>

<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<iframe src="javascript:void(0)" frameborder="0" 
        name="MSearchResults" id="MSearchResults">
</iframe>
</div>

<div id="nav-path" class="navpath">
  <ul>
<li class="navelem"><a class="el" href="../../d6/d00/tutorial_py_root.html">OpenCV-Python Tutorials</a></li><li class="navelem"><a class="el" href="../../dc/d4d/tutorial_py_table_of_contents_gui.html">Gui Features in OpenCV</a></li>  </ul>
</div>
</div><!-- top -->
<div class="header">
  <div class="headertitle">
<div class="title">Trackbar as the Color Palette </div>  </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><h2>Goal </h2>
<ul>
<li>Learn to bind trackbar to OpenCV windows</li>
<li>You will learn these functions : <b><a class="el" href="../../d7/dfc/group__highgui.html#ga122632e9e91b9ec06943472c55d9cda8" title="Returns the trackbar position. ">cv.getTrackbarPos()</a></b>, <b><a class="el" href="../../d7/dfc/group__highgui.html#gaf78d2155d30b728fc413803745b67a9b" title="Creates a trackbar and attaches it to the specified window. ">cv.createTrackbar()</a></b> etc.</li>
</ul>
<h2>Code Demo </h2>
<p>Here we will create a simple application which shows the color you specify. You have a window which shows the color and three trackbars to specify each of B,G,R colors. You slide the trackbar and correspondingly window color changes. By default, initial color will be set to Black.</p>
<p>For <a class="el" href="../../d7/dfc/group__highgui.html#gaf78d2155d30b728fc413803745b67a9b" title="Creates a trackbar and attaches it to the specified window. ">cv.createTrackbar()</a> function, first argument is the trackbar name, second one is the window name to which it is attached, third argument is the default value, fourth one is the maximum value and fifth one is the callback function which is executed every time trackbar value changes. The callback function always has a default argument which is the trackbar position. In our case, function does nothing, so we simply pass.</p>
<p>Another important application of trackbar is to use it as a button or switch. OpenCV, by default, doesn't have button functionality. So you can use trackbar to get such functionality. In our application, we have created one switch in which application works only if switch is ON, otherwise screen is always black. </p><div class="fragment"><div class="line"><span class="keyword">import</span> numpy <span class="keyword">as</span> np</div><div class="line"><span class="keyword">import</span> cv2 <span class="keyword">as</span> cv</div><div class="line"></div><div class="line"><span class="keyword">def </span>nothing(x):</div><div class="line">    <span class="keywordflow">pass</span></div><div class="line"></div><div class="line"><span class="comment"># Create a black image, a window</span></div><div class="line">img = np.zeros((300,512,3), np.uint8)</div><div class="line"><a class="code" href="../../d7/dfc/group__highgui.html#ga5afdf8410934fd099df85c75b2e0888b">cv.namedWindow</a>(<span class="stringliteral">&#39;image&#39;</span>)</div><div class="line"></div><div class="line"><span class="comment"># create trackbars for color change</span></div><div class="line"><a class="code" href="../../d7/dfc/group__highgui.html#gaf78d2155d30b728fc413803745b67a9b">cv.createTrackbar</a>(<span class="stringliteral">&#39;R&#39;,&#39;</span>image&#39;,0,255,nothing)</div><div class="line"><a class="code" href="../../d7/dfc/group__highgui.html#gaf78d2155d30b728fc413803745b67a9b">cv.createTrackbar</a>(<span class="stringliteral">&#39;G&#39;</span>,<span class="stringliteral">&#39;image&#39;</span>,0,255,nothing)</div><div class="line"><a class="code" href="../../d7/dfc/group__highgui.html#gaf78d2155d30b728fc413803745b67a9b">cv.createTrackbar</a>(<span class="stringliteral">&#39;B&#39;</span>,<span class="stringliteral">&#39;image&#39;</span>,0,255,nothing)</div><div class="line"></div><div class="line"><span class="comment"># create switch for ON/OFF functionality</span></div><div class="line">switch = <span class="stringliteral">&#39;0 : OFF \n1 : ON&#39;</span></div><div class="line"><a class="code" href="../../d7/dfc/group__highgui.html#gaf78d2155d30b728fc413803745b67a9b">cv.createTrackbar</a>(switch, <span class="stringliteral">&#39;image&#39;</span>,0,1,nothing)</div><div class="line"></div><div class="line">while(1):</div><div class="line">    <a class="code" href="../../df/d24/group__highgui__opengl.html#gaae7e90aa3415c68dba22a5ff2cefc25d">cv.imshow</a>(<span class="stringliteral">&#39;image&#39;</span>,img)</div><div class="line">    k = <a class="code" href="../../d7/dfc/group__highgui.html#ga5628525ad33f52eab17feebcfba38bd7">cv.waitKey</a>(1) &amp; 0xFF</div><div class="line">    <span class="keywordflow">if</span> k == 27:</div><div class="line">        <span class="keywordflow">break</span></div><div class="line"></div><div class="line">    <span class="comment"># get current positions of four trackbars</span></div><div class="line">    r = <a class="code" href="../../d7/dfc/group__highgui.html#ga122632e9e91b9ec06943472c55d9cda8">cv.getTrackbarPos</a>(<span class="stringliteral">&#39;R&#39;,&#39;</span>image&#39;)</div><div class="line">    g = <a class="code" href="../../d7/dfc/group__highgui.html#ga122632e9e91b9ec06943472c55d9cda8">cv.getTrackbarPos</a>(<span class="stringliteral">&#39;G&#39;</span>,<span class="stringliteral">&#39;image&#39;</span>)</div><div class="line">    b = <a class="code" href="../../d7/dfc/group__highgui.html#ga122632e9e91b9ec06943472c55d9cda8">cv.getTrackbarPos</a>(<span class="stringliteral">&#39;B&#39;</span>,<span class="stringliteral">&#39;image&#39;</span>)</div><div class="line">    s = <a class="code" href="../../d7/dfc/group__highgui.html#ga122632e9e91b9ec06943472c55d9cda8">cv.getTrackbarPos</a>(switch,<span class="stringliteral">&#39;image&#39;</span>)</div><div class="line"></div><div class="line">    <span class="keywordflow">if</span> s == 0:</div><div class="line">        img[:] = 0</div><div class="line">    <span class="keywordflow">else</span>:</div><div class="line">        img[:] = [b,g,r]</div><div class="line"></div><div class="line"><a class="code" href="../../d7/dfc/group__highgui.html#ga6b7fc1c1a8960438156912027b38f481">cv.destroyAllWindows</a>()</div></div><!-- fragment --><p> The screenshot of the application looks like below :</p>
<div class="image">
<img src="../../trackbar_screenshot.jpg" alt="trackbar_screenshot.jpg"/>
<div class="caption">
image</div></div>
 <h2>Exercises </h2>
<ol type="1">
<li>Create a Paint application with adjustable colors and brush radius using trackbars. For drawing, refer previous tutorial on mouse handling. </li>
</ol>
</div></div><!-- contents -->
<!-- HTML footer for doxygen 1.8.6-->
<!-- start footer part -->
<hr class="footer"/><address class="footer"><small>
Generated on Fri Apr 2 2021 11:36:37 for OpenCV by &#160;<a href="http://www.doxygen.org/index.html">
<img class="footer" src="../../doxygen.png" alt="doxygen"/>
</a> 1.8.13
</small></address>
<script type="text/javascript">
//<![CDATA[
addTutorialsButtons();
//]]>
</script>
</body>
</html>
